<template>
  <div class="home">
    <apiCard>
      <template #label>apiCard 组件</template>
      <template #demo>
        <Card>
          <Form v-model="srcData" :rules="rule" inline>
            {{srcData}}
            <formItemList v-model="srcData"></formItemList>
          </Form>
        </Card>
      </template>
      <template #api>
        <apiProps :element="modelList.formItemList"></apiProps>
      </template>
    </apiCard>
    <apiCard>
      <template #label>addForm</template>
      <template #demo>
        <Card>
          <addForm v-model="demoData" :rules="rule" :api="api">
            <template #default="slot">
              <span>{{slot.model}}</span>
              <formItemList v-model="slot.model"></formItemList>
            </template>
          </addForm>
        </Card>
      </template>
      <template #api>
        <apiProps :element="modelList.addForm"></apiProps>
      </template>
    </apiCard>
    <apiCard>
      <template #label>deleleForm</template>
      <template #demo>
        <Card>
          <delForm v-model="tempId" :rules="rule" :api="api">
            <template #default="slot">
              <span>{{slot.model}}</span>
              <formItemList v-model="slot.model"></formItemList>
            </template>
          </delForm>
        </Card>
      </template>
      <template #api>
        <apiProps :element="modelList.delForm"></apiProps>
      </template>
    </apiCard>
    <apiCard>
      <template #label>updateForm</template>
      <template #demo>
        <Card>
          <updateForm v-model="tempId" :rules="rule" :api="api">
            <template #default="slot">
              <span>{{slot.model}}</span>
              <formItemList v-model="slot.model"></formItemList>
            </template>
          </updateForm>
        </Card>
      </template>
      <template #api>
        <apiProps :element="modelList.updateForm"></apiProps>
      </template>
    </apiCard>
    <gj/>
  </div>
</template>
<script>
import apiCard from "@@/card/apiCard";

import apiProps from "##/api/props";
import addForm from "##/form/add";
import delForm from "##/form/delete";
import updateForm from "##/form/update";

import formItemList from "./components/formItemList";
import rule from "./components/rule";
import gj from "@@/gj";

export default {
  name: "middleList",
  components: {
    apiCard,
    apiProps,
    addForm,
    delForm,
    updateForm,
    formItemList,
    gj,
  },
  data() {
    return {
      rule,
      api: {
        getById: id => this.$post("user/getById", id)
      },
      modelList: {
        apiCard,
        apiProps,
        addForm,
        delForm,
        updateForm,
        formItemList
      },
      srcData: {},
      demoData: {},
      tempId: "4028b5bf6adf1bcb016adf1cf3c60000"
    };
  },
  mounted() {
  },
  methods: {
    registUser() {
      this.$post("regist/user", {
        acct: "www.billi.cn@qq.com",
        pwd: "*****",
        name: "蒙罗丽莎.狗蛋"
      }).then(res => {
        console.log(res);
      });
    }
  }
};
</script>
<style lang="less" scoped >
    .home {
        margin: 10px 100px;
        > div {
            margin: 10px;
        }
        .ivu-card {
            .ivu-card {
            width: 600px;
            margin: auto;
            }
        }
    }
</style>
<style lang="less" >
    .my-form {
      .my-form-item {
          > div {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-gap: 0 10px;
          justify-content: center;
          > div {
              width: 100%;
          }
          .allRow {
              width: 100%;
              grid-column: 1 / span 2;
          }
          }
      }
      .btn_box {
          margin-top: 0.5em;
          padding: 1em 0.5em;
          display: flex;
          justify-content: space-around;
      }
    }
</style>


